<template>
    <div class="flex">
        <!-- 左侧订单列表 -->
        <div :style="`width:${props.optionsWeight};height:${props.height}`">
            <!-- 订单列表操作栏 -->
            <div class="w-full grid grid-cols-3 p-2 gap-1 items-center" :style="`width:${props.optionsWeight};height: ${props.optionsHeight}`">
                <!-- 第一行常驻 搜索订单 -->
                <el-input
                    class="col-span-3"
                    v-model.trim="searchOrderValue"
                    @keydown.enter="searchOrderByOrderNoEvent"
                    placeholder=" 🔎 订单号 -- 按回车键搜索"
                />

                <!-- 正面 available 为 true 时显示 -->
                <!-- 返回 -->
                <el-button v-if="available" class="!ml-0" plain :icon="Back" @click="backCustomerListEvent">返回</el-button>
                <!-- 列表/回收站 -->
                <el-button v-if="available" class="!ml-0" plain :icon="SwitchHorizontal" @click="changeAvailableEvent"> 回收站 </el-button>
                <!-- 刷新订单 -->
                <el-button v-if="available" class="!ml-0" plain :icon="Refresh" @click="refreshOrderList">刷新</el-button>

                <!-- 多种方式添加订单 -->
                <el-dropdown v-if="checkPermi(['order:create']) && available" trigger="click">
                    <el-button class="w-full" plain :icon="ArrowDown">添加</el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <!-- 系统表单添加 -->
                            <el-dropdown-item>
                                <el-button type="primary" :icon="Table" @click="addOrderEvent('system')">系统表单添加</el-button>
                            </el-dropdown-item>
                            <!-- 在线表格添加 -->
                            <el-dropdown-item>
                                <el-button type="primary" :icon="TableBuilt" @click="addOrderEvent('onlineTable')">在线表格添加</el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button type="primary" :icon="Eye" @click="addOrderEvent('ocr')">图像识别添加</el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <!-- 订单状态筛选 -->
                <el-dropdown v-if="available" trigger="click">
                    <el-button class="w-full" plain :icon="ArrowDown">筛选</el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <!-- 显示所有订单 -->
                            <el-dropdown-item>
                                <el-button type="success" plain :icon="TaskStar" class="w-full" @click="changeOrderStatusEvent('all')">
                                    所有
                                </el-button>
                            </el-dropdown-item>
                            <!-- 显示完结订单 -->
                            <el-dropdown-item>
                                <el-button type="warning" plain :icon="TaskComplete" class="w-full" @click="changeOrderStatusEvent('true')">
                                    完结
                                </el-button>
                            </el-dropdown-item>
                            <!-- 显示未完结订单 -->
                            <el-dropdown-item>
                                <el-button type="danger" plain :icon="TaskRemove" class="w-full" @click="changeOrderStatusEvent('false')">
                                    未完结
                                </el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <!-- 订单功能键 -->
                <el-dropdown v-if="available" trigger="click">
                    <el-button class="w-full" plain :icon="ArrowDown">功能</el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <!-- 订单号变更 -->
                            <el-dropdown-item>
                                <el-button class="w-full" plain type="info" :icon="Exchange" @click="updateOrderNoEvent">变更已有单号</el-button>
                            </el-dropdown-item>
                            <!-- 订单处理回退 -->
                            <el-dropdown-item>
                                <el-button class="w-full" plain type="warning" :icon="CameraSwitch20Regular" @click="orderProcessBackEvent">
                                    订单处理切换
                                </el-button>
                            </el-dropdown-item>
                            <!-- 订单完结切换 -->
                            <el-dropdown-item>
                                <el-button class="w-full" plain type="warning" :icon="Finished" @click="orderSatausFinishEvent">
                                    订单完结切换
                                </el-button>
                            </el-dropdown-item>
                            <!-- 删除/彻底删除 订单 -->
                            <el-dropdown-item>
                                <el-button class="w-full" plain type="danger" :icon="Delete" @click="deleteOrderEvent"> 删除至回收站 </el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

                <!-- 反面 available 为 false 时显示 -->
                <!-- 返回 -->
                <el-button v-if="!available" class="!ml-0" plain :icon="Back" @click="backCustomerListEvent">返回</el-button>
                <!-- 列表/回收站 -->
                <el-button v-if="!available" class="!ml-0" plain :icon="SwitchHorizontal" @click="changeAvailableEvent"> 列表 </el-button>
                <!-- 刷新订单 -->
                <el-button v-if="!available" class="!ml-0" plain :icon="Refresh" @click="refreshOrderList">刷新</el-button>

                <!-- 全选所有未激活订单 -->
                <el-button v-if="!available" class="!ml-0" plain @click="selectedUnavailableEvent">全选</el-button>
                <!-- 恢复订单 -->
                <el-button v-if="!available" class="!ml-0" plain type="success" :icon="MagicStick" @click="recoverOrderEvent">恢复</el-button>
                <!-- 删除/彻底删除 订单 -->
                <el-button v-if="!available" class="!ml-0" plain type="danger" :icon="Delete" @click="deleteOrderEvent"> 彻底删除 </el-button>

                <!-- 最后一行常驻 功能按钮 -->
                <el-button class="!ml-0" type="primary" plain :icon="CloudUpload" @click="uploadOrderFileEvent">上传</el-button>
                <el-dropdown trigger="hover">
                    <el-button class="w-full" type="primary" plain :icon="View">预览</el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <!-- 预览源文件 -->
                            <el-dropdown-item>
                                <el-button class="w-full" plain :icon="View" @click="previewFileEvent('originalfileUrl')">预览源文件</el-button>
                            </el-dropdown-item>
                            <!-- 预览回传文件 -->
                            <el-dropdown-item>
                                <el-button class="w-full" plain :icon="View" @click="previewFileEvent('passBackfileUrl')"> 预览回传文件 </el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <el-button class="!ml-0" type="primary" plain :icon="Print20Filled" @click="manageOrderFileEvent">管理</el-button>
            </div>

            <!-- 订单列表 -->
            <div v-if="orderListData.length !== 0" :style="`width:${props.optionsWeight};height:${props.listHeight};`">
                <el-scrollbar class="scrollbar-order-list" :height="props.listHeight" @scroll="throttleFn">
                    <!-- 订单列表项 -->
                    <div
                        v-for="(item, index) in orderListData"
                        :key="index"
                        :class="item._id == orderId ? 'scrollbar-order-item scrollbar-order-item-selected' : 'scrollbar-order-item'"
                    >
                        <!-- 订单列表项左侧选择框 -->
                        <el-checkbox v-model="item.checked" @change="handleCheckboxChange(item)" />
                        <!-- 订单列表项右侧内容 -->
                        <div class="flex flex-wrap" @click="showOrderDetailEvent(item)">
                            <el-text class="w-full" tag="b" type="primary">
                                下单时间：{{ formatTimeZone(item.orderDate, 'YYYY-MM-DD HH:mm:ss') }}
                            </el-text>
                            <el-text class="w-full" tag="b" type="primary">
                                送货时间：{{
                                    item.orderDeliveryDate == '暂无送货计划'
                                        ? item.orderDeliveryDate
                                        : formatTimeZone(item.orderDeliveryDate, 'YYYY-MM-DD')
                                }}
                            </el-text>
                            <el-text class="w-full" tag="b" type="primary">订单号：{{ item.orderNo }}</el-text>
                            <el-text v-if="item.orderTax" class="w-full" tag="b" type="success">
                                含税标识：{{ item.orderTax ? '含税' : '不含税' }}
                            </el-text>
                            <el-text v-if="!item.orderTax" class="w-full" tag="b" type="warning">
                                含税标识：{{ item.orderTax ? '含税' : '不含税' }}
                            </el-text>
                            <el-text class="w-full" tag="b" type="primary">订单金额：{{ item.orderAmount }}</el-text>
                            <el-text class="w-full" tag="b" type="primary">订单备注：{{ item.orderRemark ? item.orderRemark : '无' }}</el-text>
                            <div class="w-full text-center">
                                <el-text class="w-full" tag="b" :type="parseColor(item.orderProcess)">
                                    订单处理：{{ item.orderProcess ? '已处理' : '未处理' }}
                                </el-text>
                                <el-divider direction="vertical" />
                                <el-text class="w-full" tag="b" :type="parseColor(item.orderStatus)">
                                    订单状态：{{ item.orderStatus ? '已完结' : '未完结' }}
                                </el-text>
                            </div>
                        </div>
                    </div>
                    <!-- 加载更多 -->
                    <div v-if="!scrollDisabled" @click="handleScrollToLoadOrderList" class="flex justify-center items-center h-12">
                        自动加载失败时，请手动👉点击加载更多...
                    </div>
                    <div v-if="scrollDisabled" class="flex justify-center items-center h-12">没有更多了</div>
                </el-scrollbar>
            </div>
            <!-- 暂无数据 -->
            <div v-if="orderListData.length == 0" :style="`width:${props.optionsWeight};height:${props.listHeight}`">
                <el-empty description="当前客户没有可用的订单" />
            </div>
        </div>

        <!-- 右侧订单详情 -->
        <!-- 订单详情 -- 当有订单详情时显示 -->
        <div v-if="orderId" :style="`width:${props.detailWidth};height:${props.detailHeight};`">
            <OrderDetail v-model="orderId" :customerInfo="props.customerInfo"></OrderDetail>
        </div>
        <!-- 空数据 -- 当有客户id且没有订单详情时显示 -->
        <div v-if="!orderId" class="flex items-center justify-center" :style="`width:${props.detailWidth}`">
            <el-empty description="请先选择订单后查看详情" />
        </div>
    </div>

    <!-- 系统表单添加订单 dialog -->
    <AddOrderUseSystem v-model="addOrderUseSystemVisible" :customerInfo="customerInfo"></AddOrderUseSystem>
    <!-- 在线表单添加订单 dialog -->
    <AddOrderUseOnlineTable v-model="addOrderUseOnlineTableVisible" :customerInfo="customerInfo"></AddOrderUseOnlineTable>
    <!-- 图像识别添加订单 dialog -->
    <AddOrderUseOCR v-model="addOrderUseOCRVisible" :customerInfo="customerInfo"></AddOrderUseOCR>

    <!-- 上传 -->
    <UploadOrderFile
        v-model:upload-order-file-visible="uploadOrderFileVisible"
        :customer-name="props.customerInfo.customerName"
        :order-id="orderId"
        :file-name="uploadFileName"
    ></UploadOrderFile>

    <!-- 预览PDF dialog -->
    <ScanPdf v-model:show-pdf-preview="showPdfPreview" :pdfData="pdfData"></ScanPdf>
    <!-- 预览Word dialog -->
    <ScanWord v-model:show-word-preview="showWordPreview" :wordData="wordData"></ScanWord>
    <!-- 预览Excel dialog -->
    <ScanExcel v-model:show-excel-preview="showExcelPreview" :excelData="excelData"></ScanExcel>

    <!-- 管理订单文件上传 dialog -->
    <ManageOrderFile
        v-model:manage-order-file-visible="manageOrderFileVisible"
        :customer-name="props.customerInfo.customerName"
        :order-id="orderId"
        :orderFileData="orderFileData"
        :file-name="manageFileName"
    ></ManageOrderFile>
</template>

<script setup lang="ts">
import { ArrowDown, Back, Delete, Refresh, MagicStick, View, Finished } from '@element-plus/icons-vue';
import { Table, CloudUpload, Exchange, Eye } from '@vicons/tabler';
import { TaskStar, TaskComplete, TaskRemove, TableBuilt } from '@vicons/carbon';
import { Print20Filled, CameraSwitch20Regular } from '@vicons/fluent';
import { SwitchHorizontal } from '@vicons/tabler';
import { checkPermi } from '@utils/permission';
import { deleteOrderSyncPurchase, getOrderList, getOrderListByOrderNo, orderProcessBack, orderStatusBack } from '@api/order';
import { formatTimeZone } from '@utils/calculate';
import { updateOrder, deleteOrder } from '@/api/order';
import OrderDetail from './components/OrderDetail.vue';
import AddOrderUseSystem from './components/AddOrderUseSystem.vue';
import AddOrderUseOnlineTable from './components/AddOrderUseOnlineTable.vue';
import UploadOrderFile from './components/UploadOrderFile.vue';
import ManageOrderFile from './components/ManageOrderFile.vue';
import { useOrderStore } from '@/store/modules/order';
import { downloadOrderFile } from '@/api/download';

// 获取订单列表
onMounted(() => {
    updateOrderListData();
});

// 取消组件监听事件
onUnmounted(() => {
    instance?.proxy?.$Bus.off('updateOrderList');
});

/* ******************************父组件属性/方法****************************** */
// 父组件传来的属性
type Props = {
    width: string;
    height: string;
    optionsWeight: string;
    optionsHeight: string;
    listHeight: string;
    detailWidth: string;
    detailHeight: string;
    customerInfo: {
        customerId: string;
        customerName: string;
        customerAbbreviation: string;
    };
};
const props = defineProps<Props>();

/* ******************************通用属性/方法****************************** */
// 获取当前组件实例
const instance = getCurrentInstance();
// 订单选中的id
const selected = reactive<string[]>([]);
// watch(
//     () => selected,
//     () => {
//         console.log(selected);
//     },
//     {
//         deep: true,
//     }
// );
// 订单列表数据
const orderListData = reactive<AjaxResponse['orderList']>([]);
// 订单详情列表
const orderId = ref<string>('');
// 订单激活状态
const available = ref(true);
// 订单完结状态
const orderStatus = ref<'all' | 'true' | 'false'>('all');

/* ******************************展示订单详情属性/方法****************************** */
// 点击订单列表展示订单详情事件
const showOrderDetailEvent = (item: (typeof orderListData)[0]) => {
    // 是否有选中的index
    const index = selected.indexOf(item._id);

    // 点击选中的订单
    // 未点击前订单处于未选中状态 -- 即将添加选中
    if (item.checked === false) {
        // 检查是否有选中
        if (index === -1) {
            // 添加选中
            selected.push(item._id);
        }
        // 逻辑处理
        item.checked = true;
        orderId.value = item._id;
        return;
    }

    if (item.checked === true) {
        // 检查是否有选中
        if (index !== -1) {
            // 取消选中
            selected.splice(index, 1);
        }
        // 逻辑处理
        item.checked = false;
        orderId.value = item._id;
        return;
    }
};

/* ******************************更新订单属性/方法****************************** */
// 定义分页参数
const page = ref(1); // 当前页数
// 禁止滚动
const scrollDisabled = ref(true);
// 更新订单列表的方法
const updateOrderListData = () => {
    // 清空表格数据
    orderId.value = '';
    orderListData.length = 0;
    page.value = 1;
    // 清空勾选
    selected.length = 0;
    // 获取客户订单列表
    getOrderList(props.customerInfo.customerId, page.value, available.value, orderStatus.value).then((res) => {
        // 允许滚动
        scrollDisabled.value = false;

        // 已经全部加载完毕则禁止滚动
        if (res.data.length < 10) {
            scrollDisabled.value = true;
        }

        res.data.forEach((item) => {
            item.checked = false;
            orderListData.push(item);
        });

        // 重置页码
        page.value = 1;
    });
};
// 如果父组件传来客户id，，则调用更新订单列表的方法
watch(
    () => props.customerInfo.customerId,
    () => {
        updateOrderListData();
    }
);

// 全局更新订单列表事件 -- 添加订单时触发/保存订单详情时触发
instance?.proxy?.$Bus.on('updateOrderList', function () {
    updateOrderListData();
});

/* ******************************订单列表加载更多属性/方法****************************** */
// 滚动条滚动时触发加载更多订单的时机
const handleOrderListScrollEvent = ({ scrollTop }) => {
    // 自定义滚动条容器高度
    const scrollHeight = document.getElementsByClassName('scrollbar-order-list')[0].scrollHeight;
    // 滚动条滚动到低部 -50 时触发
    if (scrollTop > scrollHeight - 50 && !scrollDisabled.value) {
        // 禁用滚动条
        scrollDisabled.value = true;
        // 触发加载更多订单数据
        handleScrollToLoadOrderList();
    }
};
// 加载更多订单内容方法
const handleScrollToLoadOrderList = () => {
    // 加载下一页
    page.value++;
    // 获取下一页客户订单列表
    getOrderList(props.customerInfo.customerId, page.value, available.value, orderStatus.value).then((res) => {
        // 禁止滚动
        if (res.data.length < 10) {
            scrollDisabled.value = true;
        }
        res.data.forEach((item) => {
            item.checked = false;
            orderListData.push(item);
        });
    });
};
// 手动创建一个节流函数
function throttle(func, delay) {
    // 定义一个变量，用于存储定时器 ID
    let timer: any = null;
    // 定义一个变量，用于记录上一次执行回调函数的时间
    let date = 0;
    // 返回一个函数，用于执行节流操作
    return function (...args) {
        // 当前的时间戳
        const now = Date.now();
        // 剩余时间（可能大于0，也可能小于0）
        const remain = delay - (now - date);
        if (remain <= 0) {
            // 如果剩余时间小于等于0，立即执行函数
            if (timer) {
                // 执行函数前先清除定时器
                clearTimeout(timer);
                timer = null;
            }
            // 执行函数
            // @ts-ignore
            func.apply(this, args);
            date = now;
        } else if (!timer) {
            // 如果剩余时间大于0，并且没有定时器，创建一个定时器
            timer = setTimeout(() => {
                // @ts-ignore
                func.apply(this, args);
                date = Date.now();
                timer = null;
            }, remain);
        }

        // 如果剩余时间大于0，且有定时器，则不执行函数 -- 实现节流
    };
}
const throttleFn = throttle(handleOrderListScrollEvent, 200);

/* ******************************订单列表选项属性/方法****************************** */
// 处理订单列表勾选事件
const handleCheckboxChange = (item: (typeof orderListData)[0]) => {
    if (item.checked) {
        // 添加被选数据并去重
        selected.push(item._id);
        let temp = [...new Set(selected)];
        selected.length = 0;
        selected.push(...temp);
    } else {
        // 删除被选数据
        const index = selected.indexOf(item._id);
        index !== -1 ? selected.splice(index, 1) : '';
    }
};

/* ******************************添加订单属性/方法****************************** */
// 使用系统表单添加订单
const addOrderUseSystemVisible = ref(false);
// 使用在线表单添加订单
const addOrderUseOnlineTableVisible = ref(false);
// 使用OCR添加订单
const addOrderUseOCRVisible = ref(false);
// 添加订单事件
const addOrderEvent = (type: string) => {
    switch (type) {
        case 'system':
            addOrderUseSystemVisible.value = true;
            break;
        case 'onlineTable':
            addOrderUseOnlineTableVisible.value = true;
            break;
        case 'ocr':
            addOrderUseOCRVisible.value = true;
            break;
        default:
            break;
    }
};

/* ******************************变更订单号属性/方法****************************** */
// 变更订单号事件
const updateOrderNoEvent = () => {
    if (selected.length !== 1) {
        ElMessage.warning('请选择一个要变更的订单');
    } else {
        ElMessageBox.prompt('请输入新订单号', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            inputPattern: /^.+$/,
            inputErrorMessage: '不能为空',
        }).then(({ value }) => {
            updateOrder(selected[0], 'orderNo', value).then((res) => {
                ElMessage({
                    type: 'success',
                    message: res.message,
                });
                updateOrderListData();
            });
        });
    }
};

/* ******************************订单处理回退属性/方法****************************** */
const orderProcessBackEvent = () => {
    if (selected.length !== 1) {
        ElMessage.warning('请选择一个要变更的订单');
    } else {
        // 本地处理
        useOrderStore().removeOrderProcess(selected[0]);

        // 数据库处理
        orderProcessBack(selected).then((res) => {
            ElMessage({
                type: 'success',
                message: res.message,
            });
            updateOrderListData();
        });
    }
};

/* ******************************订单完结回退属性/方法****************************** */
const orderSatausFinishEvent = () => {
    if (selected.length !== 1) {
        ElMessage.warning('请选择一个要变更的订单');
    } else {
        // 数据库处理
        orderStatusBack(selected).then((res) => {
            ElMessage({
                type: 'success',
                message: res.message,
            });
            updateOrderListData();
        });
    }
};

/* ******************************搜索订单属性/方法****************************** */
// 搜索值（订单号）
const searchOrderValue = ref();
// 搜索订单事件
const searchOrderByOrderNoEvent = () => {
    getOrderListByOrderNo(searchOrderValue.value).then((res) => {
        // 清空表格数据
        orderId.value = '';
        orderListData.length = 0;
        page.value = 1;
        // 清空勾选
        selected.length = 0;
        // 禁止滚动
        scrollDisabled.value = true;

        res.data.forEach((item) => {
            item.checked = false;
            orderListData.push(item);
        });
    });
};

/* ******************************强制订单完结****************************** */
// 刷新订单的值
const refreshOrderList = () => {
    updateOrderListData();
};

/* ******************************改变订单状态属性/方法****************************** */
const changeOrderStatusEvent = (options: 'all' | 'true' | 'false') => {
    orderStatus.value = options;
    let message = '';
    switch (orderStatus.value) {
        case 'all':
            message = '展示全部订单！';
            ElMessage({
                message: message,
                type: 'success',
                grouping: true,
            });
            // 改变订单状态
            updateOrderListData();
            break;
        case 'true':
            message = '展示完结订单！';
            ElMessage({
                message: message,
                type: 'success',
                grouping: true,
            });
            // 改变订单状态
            updateOrderListData();
            break;
        case 'false':
            message = '展示未完结订单！';
            ElMessage({
                message: message,
                type: 'success',
                grouping: true,
            });
            // 改变订单状态
            updateOrderListData();
            break;
        default:
            break;
    }
};

/* ******************************返回客户列表属性/方法****************************** */
// 返回客户列表
const backCustomerListEvent = () => {
    instance?.proxy?.$Bus.emit('backCustomerList');
};

/* ******************************删除/彻底删除订单属性/方法****************************** */
// 删除/彻底删除勾选订单
const deleteOrderEvent = () => {
    // available为true时,表示删除订单
    if (available.value) {
        if (selected.length !== 1) {
            ElMessage({
                message: '请先勾选一条要删除的数据！',
                type: 'warning',
                grouping: true,
            });
        } else {
            // 改变激活状态 -- 删除订单
            updateOrder(selected[0], 'available', false).then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        message: '删除成功！',
                        type: 'success',
                        grouping: true,
                    });
                    // 更新订单列表
                    updateOrderListData();
                } else {
                    // 检测到该订单已有采购单
                    // 更新订单列表
                    updateOrderListData();
                    ElMessageBox.confirm(res.message, '警告', {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        type: 'warning',
                    })
                        .then(() => {
                            deleteOrderSyncPurchase(res.data as string).then((result) => {
                                if (result.code == 200) {
                                    ElMessage({
                                        message: result.message,
                                        duration: 3000,
                                        type: 'success',
                                        grouping: true,
                                    });
                                    return;
                                }
                                ElMessage({
                                    message: result.message,
                                    type: 'info',
                                    duration: 3000,
                                    grouping: true,
                                });
                            });
                        })
                        .catch(() => {
                            ElMessage({
                                type: 'warning',
                                message: `取消该操作可能会导致订单异常，请手动删除【${res.data}】订单`,
                                duration: 0,
                            });
                        });
                }
            });
        }
    } else {
        // available为false时,表示移除订单
        deleteOrder(selected).then(() => {
            ElMessage({
                message: '移除成功！',
                type: 'success',
                grouping: true,
            });
            // 更新订单列表
            updateOrderListData();
        });
    }
};

/* ******************************订单/回收站属性/方法****************************** */
// 恢复勾选订单
const changeAvailableEvent = async () => {
    // 改变子组件激活状态
    orderId.value = '';
    // 加载显示订单/隐藏已删除订单
    available.value = !available.value;
    updateOrderListData();
};

/* ******************************全选回收站属性/方法****************************** */
const selectedUnavailableEvent = () => {
    orderListData.forEach((item) => {
        selected.push(item._id);
        item.checked = true;
    });
};

/* ******************************恢复勾选订单属性/方法****************************** */
const recoverOrderEvent = () => {
    // 恢复
    if (selected.length !== 1) {
        ElMessage({
            message: '请先勾选一条要恢复的数据！',
            type: 'warning',
            grouping: true,
        });
    } else {
        updateOrder(selected[0], 'available', true).then((res) => {
            ElMessage({
                message: res.message,
                type: 'success',
                grouping: true,
                duration: 5000,
            });
            updateOrderListData();
        });
    }
};

/* ******************************工具属性/方法****************************** */
// 订单是否完结颜色
const parseColor = (flag: boolean) => {
    if (flag) {
        return 'success';
    } else {
        return 'danger';
    }
};

/* ******************************订单PDF属性/方法****************************** */
// 预览订单文件事件
const previewFileEvent = (type: 'passBackfileUrl' | 'originalfileUrl') => {
    // 检查是否有选中
    if (selected.length !== 1) {
        ElMessage({
            message: '请先勾选一条要预览的数据！',
            type: 'warning',
            grouping: true,
        });
        return;
    }
    // 如果有回传就查看回传，否则就查看源文件
    const order = orderListData.find((item) => {
        return item._id == selected[0];
    });

    // 检查是否有回传文件或源文件
    if (order!.orderFiles.length == 0) {
        ElMessage({
            message: '该订单没有文件！无法预览！',
            type: 'warning',
            grouping: true,
        });
        return;
    }

    // 检查是否有回传文件或源文件
    if (order!.orderFiles[order!.orderFiles.length - 1][type] == '') {
        ElMessage({
            message: '该订单没有文件！无法预览！',
            type: 'warning',
            grouping: true,
        });
        return;
    }

    // 什么结尾的文件就预览什么
    const suffix = order!.orderFiles[order!.orderFiles.length - 1][type]!.split('.').pop();
    switch (suffix) {
        case 'pdf':
            // 需要传递给子组件的数据
            handlePdfFileData(order!.orderFiles[order!.orderFiles.length - 1][type]!);
            break;
        case 'doc':
            ElMessage({
                message: 'doc文件暂不支持预览！',
                type: 'warning',
                grouping: true,
            });
            break;
        case 'docx':
            // 需要传递给子组件的数据
            handleWordFileData(order!.orderFiles[order!.orderFiles.length - 1][type]!);
            break;
        case 'xls':
            // 需要传递给子组件的数据
            handleExcelFileData(order!.orderFiles[order!.orderFiles.length - 1][type]!);
            break;
        case 'xlsx':
            // 需要传递给子组件的数据
            handleExcelFileData(order!.orderFiles[order!.orderFiles.length - 1][type]!);
            break;
    }
};
/* ******************************订单PDF属性/方法****************************** */
// pdf订单弹窗显示状态
const showPdfPreview = ref(false);
// pdf数据
const pdfData = ref();
// 加载DPF文件
const handlePdfFileData = async (src: string) => {
    try {
        // 使用 fetch 获取文件内容
        const response = await downloadOrderFile(src);
        // 检查 Blob 是否有效
        if (!response || response.size === 0) {
            ElMessage({
                message: '读取文件失败，请稍后重试',
                type: 'error',
                grouping: true,
            });
            throw new Error('Failed to fetch valid file');
        }

        // 创建 FileReader 实例
        const reader = new FileReader();

        // 当读取完成时
        reader.onload = () => {
            // 需要传递给子组件的数据
            pdfData.value = new Uint8Array(reader.result as ArrayBuffer);
            // 打开弹窗
            showPdfPreview.value = true;
        };

        // 读取 Blob 内容
        reader.readAsArrayBuffer(response as unknown as Blob);
    } catch (error) {
        console.error('Error reading file:', error);
        ElMessage({
            message: '读取文件失败，请稍后重试',
            type: 'error',
            grouping: true,
        });
    }
};

/* ******************************订单Word属性/方法****************************** */
// word订单弹窗显示状态
const showWordPreview = ref(false);
// word数据
const wordData = ref();
// 加载word文件
const handleWordFileData = async (src: string) => {
    try {
        // 使用 fetch 获取文件内容
        const response = await downloadOrderFile(src);
        // 检查 Blob 是否有效
        if (!response || response.size === 0) {
            ElMessage({
                message: '读取文件失败，请稍后重试',
                type: 'error',
                grouping: true,
            });
            throw new Error('Failed to fetch valid file');
        }

        // 创建 FileReader 实例
        const reader = new FileReader();

        // 当读取完成时
        reader.onload = () => {
            // 需要传递给子组件的数据
            wordData.value = new Uint8Array(reader.result as ArrayBuffer);
            // 打开弹窗
            showWordPreview.value = true;
        };

        // 读取 Blob 内容
        reader.readAsArrayBuffer(response as unknown as Blob);
    } catch (error) {
        console.error('Error reading file:', error);
    }
};

/* ******************************订单Excel属性/方法****************************** */
// excel订单弹窗显示状态
const showExcelPreview = ref(false);
// excel数据
const excelData = ref();
// 加载excel文件
const handleExcelFileData = async (src: string) => {
    try {
        // 使用 fetch 获取文件内容
        const response = await downloadOrderFile(src);
        // 检查 Blob 是否有效
        if (!response || response.size === 0) {
            ElMessage({
                message: '读取文件失败，请稍后重试',
                type: 'error',
                grouping: true,
            });
            throw new Error('Failed to fetch valid file');
        }

        // 创建 FileReader 实例
        const reader = new FileReader();

        // 当读取完成时
        reader.onload = () => {
            // 需要传递给子组件的数据
            excelData.value = new Uint8Array(reader.result as ArrayBuffer);
            // 打开弹窗
            showExcelPreview.value = true;
        };

        // 读取 Blob 内容
        reader.readAsArrayBuffer(response as unknown as Blob);
    } catch (error) {
        console.error('Error reading file:', error);
    }
};

/* ******************************上传文件属性/方法****************************** */
// 上传文件弹窗显示状态
const uploadOrderFileVisible = ref(false);
// 刷新订单
watch(
    () => uploadOrderFileVisible.value,
    (newValue) => {
        // 弹窗关闭时刷新订单列表
        if (!newValue) {
            refreshOrderList();
        }
    }
);
// 上传文件的名称
const uploadFileName = ref('');
// 订单文件上传事件
const uploadOrderFileEvent = () => {
    if (selected.length !== 1) {
        ElMessage({
            message: '请先勾选一条要上传数据的订单！',
            type: 'warning',
            grouping: true,
        });
        return;
    }

    // 获取被勾选的订单
    const order = orderListData.find((item) => {
        return item._id == selected[0];
    });
    // 生成上传文件名称
    uploadFileName.value = order!.orderNo;
    // 验证上传文件名称
    if (uploadFileName.value == '') {
        ElMessage({
            message: '生成上传文件失败！请刷新页面后，重试！',
            type: 'warning',
            grouping: true,
        });
        return;
    }
    uploadOrderFileVisible.value = true;
};

/* ******************************管理上传文件属性/方法****************************** */
// 管理上传文件弹窗显示状态
const manageOrderFileVisible = ref(false);
// 刷新订单
watch(
    () => manageOrderFileVisible.value,
    (newValue) => {
        // 弹窗关闭时刷新订单列表
        if (!newValue) {
            refreshOrderList();
        }
    }
);
// 管理文件的名称
const manageFileName = ref('');
// 订单文件数据
const orderFileData = reactive<AjaxResponse['orderList'][0]['orderFiles']>([]);
// 管理上传文件事件
const manageOrderFileEvent = () => {
    if (selected.length !== 1) {
        ElMessage({
            message: '请先勾选一条需要管理的订单！',
            type: 'warning',
            grouping: true,
        });
        return;
    }

    orderFileData.length = 0;

    // 获取被勾选的订单
    const order = orderListData.find((item) => {
        return item._id == selected[0];
    });
    // 生成上传文件名称
    manageFileName.value = order!.orderNo;
    // 服务器上保存的文件数据
    order?.orderFiles.forEach((item) => {
        orderFileData.push(item);
    });
    // 管理订单文件的dialog
    manageOrderFileVisible.value = true;
};
</script>

<style scoped>
.scrollbar-order-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
    margin: 5px 0;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
    cursor: pointer;
}

.scrollbar-order-item:hover {
    background: var(--el-color-primary-light-7);
}

.scrollbar-order-item-selected {
    background: var(--el-color-warning-light-9);
    color: var(--el-color-warning);
}
</style>
